<template>
  <div class="visitor_record">
    <van-nav-bar
      title="访客记录"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        class="dynamic-list-style"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in recordList" :key="index">
          <div v-if="index != 0" class="devide_div"></div>
          <div class="lifepay_sub_title">
            {{ `${item.year}年${item.month}月` }}
          </div>
          <div class="lifepay_devide_info">
            <ul class="repair_ul">
              <li v-for="o in item.contentList" :key="o.id" class="repair_list">
                <span class="repair_title">{{ o.visitorName }}</span>
                <p class="repair_time_des">
                  <svg-icon icon-class="我的报修-预约时间"></svg-icon>
                  <span>到访时间</span>
                </p>
                <p class="repair_time">{{ o.visitorDate }}</p>
                <div class="status_btn edit_btn" @click="handleEdit(o)">
                  <span>修改</span>
                </div>
                <div class="status_btn" @click="handleDelete(o)">
                  <span>删除</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-list></van-pull-refresh
    >
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import smartProperty from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
import { Dialog } from "vant";
export default {
  name: "myRepair",
  data() {
    return {
      loading: false,
      finished: false,
      isLoading: false,
      recordList: [],
      tmpList: [],
      curPage: 1,
      pageSize: 10,
      userId: null,
      showLoading: true
    };
  },
  computed: {
    statusBtnColor() {
      return function(status) {
        let bgColor = "";
        if (status == "0") {
          bgColor = "#DC4630";
        } else {
          bgColor = "#BFC2CC";
        }
        return bgColor;
      };
    }
  },
  mounted() {
    this.userId = JSON.parse(localStorage.getItem("userInfo")).currentUser.id;
  },
  methods: {
    onRefresh() {
      this.tmpList = [];
      setTimeout(() => {
        this.curPage = 1;
        this.pageSize = 10;
        this.getRecordList();
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      this.getRecordList();
    },
    getRecordList() {
      this.showLoading = true;
      const data = {
        createBy: this.userId,
        curPage: this.curPage,
        pageSize: this.pageSize
      };
      smartProperty
        .community_visitor_record_page(data)
        .then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            this.tmpList = [...this.tmpList, ...res.datas.records];
            this.recordList = this.sortArray(this.tmpList);
            this.curPage = this.curPage + 1;
            if (res.datas.records.length < this.pageSize) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    handleEdit(val) {
      this.$router.push({
        name: "intelligentAccessControl",
        query: val
      });
    },
    deleteRecord(ids) {
      smartProperty.community_visitor_record_ids(ids).then(res => {
        if (res.code === "0") {
          this.$toast("删除成功");
          this.curPage = 1;
          this.pageSize = 10;
          this.tmpList = [];
          this.getRecordList();
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    handleDelete(val) {
      Dialog.confirm({
        title: "提示",
        message: `确认删除${val.visitorName}的访问记录?`
      })
        .then(() => {
          this.deleteRecord([val.id]);
        })
        .catch(() => {});
    },
    sortArray(arr) {
      let arr1 = [];
      arr.forEach(ele => {
        for (let i = 0; i < arr1.length; i++) {
          let e = arr1[i];
          if (e.year === ele.year && e.month === ele.month) {
            e.contentList.push(ele);
            return;
          }
        }
        arr1.push({
          month: ele.month,
          year: ele.year,
          contentList: [ele]
        });
      });
      return arr1;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.visitor_record {
  background: #ffffff !important;
  height: 100%;

  
  

  .repair_ul {
    .repair_list {
      border-bottom: 1px solid rgba(226, 226, 226, 0.5);
      padding: 15px;
      color: #333333;
      position: relative;
      background: #ffffff;

      .status_btn {
        position: absolute;
        right: 15px;
        bottom: 15px;
        border-radius: 4px;
        color: #ffffff;
        font-size: 13px;
        padding: 0 10.5px;
        line-height: 25.5px;
        background: #dc4630;
      }

      .edit_btn {
        right: 70px;
      }

      .repair_title {
        font-size: 14px;
        line-height: 20px;
      }

      .status_title {
        margin-left: 10px;
        font-size: 14px;
        line-height: 20px;
        color: #ffffff;
      }

      p {
        margin: 8px 0 0 0;

        span {
          margin-left: 5px;
          font-size: 12px;
          color: #999999;
        }
      }

      .repair_time {
        font-size: 12px;
      }
    }
  }
}
</style>
